import React, { Component } from 'react'
import { connect } from 'react-redux'
import { menulistAct, rolelistAct, tokenAct, userInfoAct } from '../../store/action/commonAct'
import { Input, Checkbox, Button, message } from 'antd'
import { UserOutlined, KeyOutlined} from '@ant-design/icons'

import './index.less'
import { loginApi, userInfoApi } from '../../apis/userApi'
import { menuListApi, roleListApi } from '../../apis/homeApi'

import { MD5 } from 'crypto-js'


class Login extends Component {

    state={
        id:'',
        password:'',
        remember:false,
        auto:false
    }
    
    async loginEvt(){
        if(!this.state.id) {
            message.warn('用户编码必须输入')
        }

        if(!this.state.password){
            message.warn('用户密码必须输入')
        }

        let result = await loginApi({id: this.state.id,password: MD5(this.state.password).toString()})
        if(result.code !== 200) {
            message.error("登陆失败，原因："+result.message)
            return
        }

        this.props.dispatch(tokenAct(result.data.token))

        let user = await userInfoApi(this.state.id)
        if(user.code === 200) {
            this.props.dispatch(userInfoAct(user.data))
            let role = await roleListApi(user.data.role)
            if (role.code === 200) {
                this.props.dispatch(rolelistAct(role.data))
            }
        }

        let menu = await menuListApi()
        if(menu.code === 200) {
            // debugger
            this.props.dispatch(menulistAct(menu.data))
        }

        this.props.history.push('/home')
    }

    render() {
        console.log(this.props);
        return (
            <div className="login-container">
                <div className="box">
                    <span className="title">
                        用户登录
                    </span>
                    <Input size="small"
                        value={this.state.id}
                        onChange={
                            e => {
                                this.setState({id:e.target.value.trim()})
                            }
                        }
                        placeholder="请输入用户编码" 
                     prefix={<UserOutlined />} />
                    <Input size="middle" 
                        value={this.state.password}
                        onChange={
                            e => {
                                this.setState({password:e.target.value.trim()})
                            }
                        }
                        type="password"
                        placeholder="请输入用户密码" 
                    prefix={<KeyOutlined />} />
                    <div className="cd">
                        <Checkbox checked={this.state.remember} onChange={
                            e => {
                                this.setState({remember: e.target.checked})
                            }
                        }>记住密码？</Checkbox>
                    </div>
                    <div className="cd">
                        <Checkbox checked={this.state.auto} onChange={
                            e => {
                                this.setState({auto: e.target.checked})
                            }
                        }>是否7天免登录？</Checkbox>
                    </div>
                    <Button onClick={this.loginEvt.bind(this)} type="primary">登录</Button>
                </div>
            </div>
        )
    }
}

export default connect()(Login)